<template>
  <div>
    <h2>文件管理</h2>

    <!-- 文件上传 -->
    <input type="file" @change="onFileChange" />
    <button @click="uploadFileHandler">上传文件</button>

    <h3>文件列表</h3>
    <ul>
      <li v-for="file in files" :key="file.name">
        {{ file.name }}
        <button @click="downloadFileHandler(file.name)">下载</button>
        <button @click="deleteFileHandler(file.name)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { uploadFile, downloadFile, deleteFile, listFiles } from '@/api/system/image.js';

export default {
  data() {
    return {
      selectedFile: null, // 上传的文件
      files: [] // 文件列表
    };
  },

  methods: {
    // 处理文件选择
    onFileChange(event) {
      this.selectedFile = event.target.files[0];
    },

    // 上传文件处理
    async uploadFileHandler() {
      if (!this.selectedFile) {
        alert('请先选择一个文件');
        return;
      }

      try {
        await uploadFile(this.selectedFile);
        alert('文件上传成功');
        this.selectedFile = null; // 清空选择的文件
        await this.fetchFileList(); // 重新获取文件列表
      } catch (error) {
        console.error(error);
        alert('文件上传失败');
      }
    },

    // 获取文件列表
    async fetchFileList() {
      try {
        const response = await listFiles();
        this.files = response.data; // 更新文件列表
      } catch (error) {
        console.error(error);
        alert('获取文件列表失败');
      }
    },

    // 下载文件处理
    async downloadFileHandler(fileName) {
      try {
        const response = await downloadFile(fileName);
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName); // 设定下载文件的名称
        document.body.appendChild(link);
        link.click();
        link.remove();
      } catch (error) {
        console.error(error);
        alert('文件下载失败');
      }
    },

    // 删除文件处理
    async deleteFileHandler(fileName) {
      if (confirm(`确定要删除 ${fileName} 吗？`)) {
        try {
          await deleteFile(fileName);
          alert('文件删除成功');
          await this.fetchFileList(); // 重新获取文件列表
        } catch (error) {
          console.error(error);
          alert('文件删除失败');
        }
      }
    }
  },

  mounted() {
    this.fetchFileList(); // 组件挂载时获取文件列表
  }
};
</script>

<style scoped>
/* 根据需要添加样式 */
h2 {
  color: #333;
}

h3 {
  margin-top: 20px;
}

button {
  margin-left: 10px;
}
</style>
